<template>
  <div class="user-center">
    <div class="uc-info clearfix">
      <div class="uc-icon fl"></div>
      <div class="uc-name">{{userName}}</div>
    </div>
    <ul class="uc-list">
      <li class="van-hairline--bottom">1</li>
      <li class="van-hairline--bottom">2</li>
      <li class="van-hairline--bottom">3</li>
      <li class="van-hairline--bottom">4</li>
      <li>5</li>
    </ul>
    <div class="login-out" @click="loginOut">退出登录</div>
  </div>
</template>

<script>
import { DELETE } from '../../api/common'
export default {
  name: 'userCenter',
  components: {
  },
  data() {
    return {
      userName: 'miter'
    };
  },
  created() {
  },
  methods: {
    loginOut() {
      this.$loading('退出中...')
      let params = {}
      DELETE('api/login/', params).then(res => {
        this.$close()
        if (res.code == 200) {
          this.$removeStorage('token')
          this.$store.state.isLogin = false
          this.$router.push('/login')
        }
      })
    }
  }
};
</script>

<style scoped lang="less">
  .user-center {
    .uc-info {
      background-color: #fff;
      padding: 10px 0;
      margin: 10px auto;
      .uc-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #7272ff;
        margin-left: 15px;
      }
      .uc-name {
        font-size: 24px;
        font-weight: bold;
        margin-left: 70px;
        padding-top: 4px;
      }
    }
    .uc-list {
      background-color: #fff;
      margin-bottom: 10px;
      li {
        height: 45px;
        line-height: 45px;
        padding-left: 15px; 
      }
    }
    .login-out {
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #e40000;
      background-color: #fff;
    }
  }
</style>
